<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul class="nav">
    <li>榴莲</li>
    <li>臭豆腐</li>
    <li>鲱鱼馒头</li>
    <li>大猪蹄子</li>
</ul>

<script>
    // 闭包应用
    // 1.
    var lis = document.querySelectorAll('li');

    // for循环中 用let解决这个问题 !!!, 不要用for

    // 现在使用let 来测试闭包
    /*for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            console.log(i)
        }
    }*/

    // 2.利用闭包的方式得到当前li的索引号
    for (var i = 0; i < lis.length; i++) {
        // 利用for循环创建了4个立即执行函数
        // 立即执行函数也称为小闭包, 因为立即执行函数里面的任何一个函数都可以使用它的i这个变量
        (function (i) {
            lis[i].onclick = function () {
                console.log(i)
            }
        }(i))
    }

</script>
</body>
</html>
